<template>
  <div>
    <div id="myChart" ref="myChart" :style="{ width: '100%', height: '180px' }"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    formData: {},
    type: {},
    time: {
      type: String
    }
  },
  data() {
    return {};
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        this.drawLine();
      },
      deep: true
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(this.$refs.myChart);
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10%',
          left: '10%',
          right: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          show: true,
          axisLabel: {
            formatter: '{value} ',
            show: true
          },
          splitLine: { show: false },
          axisLine: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          inverse: true, // 倒叙
          axisLabel: {
            formatter: (val) => {
              return `${val}`;
            }
          },
          axisLine: {
            show: false // 轴线
          },
          axisTick: {
            show: false // 刻度线
          },
          data: ['出行服务咨询', '出行服务投诉', 'ETC通行费争议投诉', '读卡故障/资费问题', '通行记录/资费问题']
        },
        series: [
          {
            name: 'Echarts',
            type: 'bar',
            barWidth: 13,
            itemStyle: {
            normal: {
              color: "rgba(67, 156, 245, 1)", //改变折线点的颜色
              lineStyle: {
                color: "rgba(67, 156, 245, 1)" //改变折线颜色
              }
            }
          },
            data: [100, 200, 300, 400, 500]
          }
        ]
      })
    }
  }
};
</script>